<template>
  <div id="content">
    <div class="top">
      <!-- 头像 -->
      <el-upload
        class="avatar-uploader"
        :action="url"
        method="PATCH"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <div class="block">
          <el-avatar v-if="circleUrl" :size="120" fit="fill" :src="circleUrl" />
          <el-icon v-else class="avatar-uploader-icon"
            ><img
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              alt=""
          /></el-icon>
        </div>
      </el-upload>
      <!-- 用户信息 -->
      <div class="userInfo">
        <el-descriptions class="margin-top" title="我的信息" :column="3" border>
          <template #extra>
            <el-button type="primary" @click="updateInfo" plain>修改</el-button>

            <el-button type="success" @click="saveInfo" plain>保存</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">用户名</div>
            </template>
            <el-input
              v-model="userInfo.username"
              placeholder="Please input"
              :readonly="flag"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">手机号</div>
            </template>
            <el-input
              v-model="userInfo.tel"
              placeholder="未绑定手机号"
              :readonly="flag"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">所在城市</div>
            </template>
            <el-input
              v-model="userInfo.city"
              placeholder="请添加城市信息"
              :readonly="flag"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">密码</div>
            </template>
            <el-input
              v-model="userInfo.password"
              placeholder="请修改密码"
              :readonly="flag"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">收货地址</div>
            </template>
            <el-input
              v-model="userInfo.address"
              placeholder="请添加收获地址"
              :readonly="flag"
            />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- <div class="time">日历</div> -->
    </div>
    <div class="oether">
      其余内容正在开发中！
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch } from "vue";
import { upload, handUserInfo } from "@/api/api.js";
// import{CheckImgExists}from "@/js/sendimg"
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    // 移入vuex
    const store = useStore();
    // 移入路由
    const router = useRouter();
        // 登录用户的id
    const userId = store.state.userInfo.info.id;
    // 头像
    const circleUrl = ref("");
    // 用户信息
    const userInfo = reactive({
      username: "",
      tel: "",
      city: "",
      password: "",
      address: "",
    });
    // 未被修改前的密码
    const oldpwd = ref();
    // readonly属性是否生效
    const flag = ref(true);
    // 修改用户信息
    const updateInfo = () => {
      flag.value = false;
    };
    // 修改头像请求地址
  const url = "http://localhost:8081/user/"+userId
  console.log(url);
    // 保存用户信息
    const saveInfo = () => {
      flag.value = true;
      // 修改密码后去除vuex数据和浏览器存储数据，用户需重新登录
      if (userInfo.password != oldpwd.value) {
        console.log("密码修改了");
        store.dispatch("loginOut").then(() => {
          router.push("/login");
        });
      }
      upload("patch", userId, userInfo).then((res) => {
        console.log("成功");
        console.log(res.data);
      });
    };

    // 页面加载根据id得到登录用户数据
    onMounted(() => {
      handUserInfo("get", userId).then((res) => {
        console.log(res.data[0]);
        userInfo.username = res.data[0].username;
        userInfo.password = res.data[0].password;
        userInfo.tel = res.data[0].tel;
        userInfo.city = res.data[0].city;
        userInfo.address = res.data[0].address;
        oldpwd.value = res.data[0].password;
        var ImgObj = new Image(); //判断图片是否存在
        ImgObj.src = res.data[0].img;
        //存在图片
        if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
          console.log("图片地址有效");
          circleUrl.value = res.data[0].img;
          // return true;
        } else {
          console.log("图片地址无效");
          // return false;
        }
      });
    });

    const handleAvatarSuccess = (response, uploadFile) => {
      console.log(uploadFile.raw);
      console.log(response);
      circleUrl.value = URL.createObjectURL(uploadFile.raw);

      upload("patch", userId, { img: circleUrl.value }).then((res) => {
        console.log("成功");
        console.log(res.data);
      });
    };

    return {
      userInfo,
      circleUrl,
      url,
      flag,
      handleAvatarSuccess,
      updateInfo,
      saveInfo,
    };
  },
};
</script>

<style lang="scss" scoped>
#content {
  /* 	border: 1px solid red; */
  width: 70%;
  min-width: 1090px;
  height: 650px;
  background-color: #dcdcdc;
  border-radius: 10px;
  margin: auto;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.top {
  height: 37%;
  width: 100%;
  background-color: rgba(255, 170, 0, 0.751);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 10px 10px 0 0;
  .userInfo {
    width: 70%;
  }
}
.el-input ::v-deep .el-input__wrapper {
  .el-input__inner {
    text-align: center;
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
      inset;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  }
  box-shadow: 0 0 0 0;
  .el-input__inner[readonly] {
    box-shadow: 0 0 0 0;
  }
}
.block {
  .el-icon {
    margin-top: 40px;
  }
  .el-avatar {
    margin-top: 40px;
  }
}
.cell-item {
  width: 80px;
  text-align: center;
}
.oether{
  font-size: 30px;
  margin: 0 auto;
  line-height: 400px;
}
</style>